import React from 'react';
import {Link} from 'react-router';
import {PAY_ORDER} from '../../constants/userTypes';
import {setItem, getItem} from "../../utils";
import WeChatConfig from '../../components/WeChatConfig/WeChatConfig';

/**
 * 加载公共组件
 * */
import MainSection from '../../components/MainSection/MainSection';
import Panel from '../../components/Panel/Panel';
import FootSubmitBtn from '../../components/FootSubmitBtn/FootSubmitBtn';


/**
 * 加载样式或图片文件
 * */
import './sass/payType.scss';


class PayType extends React.Component {
    static contextTypes = {
        router: React.PropTypes.object.isRequired
    };
    static timer = null;

    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.state = {
            type: 101,
            submitFlag: false
        };
    }

    componentDidMount() {
        const {location} = this.props;
        // this.sstState({
        //     number: location.state.number,
        //     eventId: location.state.eventId
        // })
    }

    handleTypeChange(type) {
        this.setState({type: type});
    }

    handleSubmit() {
        const {actions, params, location, user} = this.props;

        this.context.router.push({
            pathname: "/activityList/"+params.id+"/applySuccess",
            state: {
                number: location.state.number,
                eventId: location.state.eventId
            }
        })

        actions.payOrder({
            number: location.state.number,
            method: this.state.type
        }).then(res=> {
            if (res.type === PAY_ORDER) {
                if (res.data.code == 20000) {
                    alert("start pay")
                    actions.fetchWxPaySign({
                        number: res.data.data.number,
                        timestamp: user.wxConfig.timestamp,
                        nonceStr: user.wxConfig.nonceStr
                    }).then(res=> {
                        alert('get payConfig');
                        if (res.data.code === 20000) {
                            let sign = res.data.data;
                            wx.chooseWXPay({
                                appId: sign.appId, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                                timestamp: sign.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                                nonceStr: sign.nonceStr, // 支付签名随机串，不长于 32 位
                                package: sign.packages, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                                signType: sign.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                                paySign: sign.paySign, // 支付签名
                                success: function (res) {
                                    // 支付成功后的回调函数
                                }
                            });
                            this.timer = setInterval(()=> {
                                actions.fetchPayResult({number: location.state.number}).then(res=> {
                                    if (res.data.data.payStatus == 102) {
                                        alert('finish pay');
                                        setItem('payData', data);
                                        clearInterval(this.timer);
                                        this.context.router.push({
                                            pathname: "/activityList/"+params.id+"/applySuccess",
                                            state: {
                                                number: location.state.number,
                                                eventId: location.state.eventId
                                            }
                                        })
                                    }
                                })
                            }, 1000)
                        }

                    })
                }
            }
        });


    }

    componentWillUnmount() {
        clearInterval(this.timer);
    }

    render() {
        const {location, actions} = this.props;
        return (
            <MainSection className="pay-type" title="支付方式">
                <WeChatConfig actions={actions}/>
                <Panel title="支付方式">
                    <div className="line-wrap"
                         onClick={this.handleTypeChange.bind(this,101)}>
                        <span>
                            <img src="../../../containers/_common_img/payWay/weixin.png" alt=""/>
                            微信支付
                        </span>
                        <i className={this.state.type===101 ? "checked" : ""}/>

                    </div>
                    <div className="line-wrap no-border"
                         onClick={this.handleTypeChange.bind(this,102)}>
                        <span>
                            <img src="../../../containers/_common_img/payWay/zfb.png" alt=""/>
                            支付宝支付
                        </span>
                        <i className={this.state.type===102 ? "checked" : ""}/>
                    </div>
                </Panel>
                <FootSubmitBtn submitFlag={true} price={location.state.payPrice / 100} submitFn={this.handleSubmit}
                               btnText="去支付"/>
            </MainSection>
        );
    }
}

export default PayType;